.editor-visibility {
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	align-items: center;
	margin: 8px 0 0;
}

.editor-visibility .button {
	&.is-dialog-open,
	&.is-touch,
	&:hover {
		.editor-visibility__label {
			color: darken( $gray, 10% );
		}
	}

	.gridicon {
		margin-right: 4px;
	}
}

.editor-visibility__dialog{
	text-align: left;
	width: 180px;
	padding: 20px;

	.form-text-input {
		font-size: 13px;

		&.is-info-open {
			margin-top: 8px;
		}
	}

	.form-input-validation {
		padding-bottom: 0;
	}

	.form-setting-explanation {
		margin: -4px 0 8px 24px;

		&.password {
			margin-bottom: 0;
		}
	}

	.gridicon {
		cursor: pointer;
		vertical-align: bottom;
		margin-left: 4px;
		color: lighten( $gray, 15% );

		&:hover {
			color: $gray-dark;
		}
	}

	.gridicon.is_active {
		color: $gray-dark;

		&:hover {
			color: lighten( $gray, 15% );
		}
	}
}

.editor-visibility__tooltip .popover__inner {
	white-space: nowrap;
}

.popover {
	&.editor-visibility__popover {
		/* applying a lower z-index to ensure it is layered behind the masterbar */
		z-index: z-index( 'root', '.popover.editor-visibility__popover' );
	}
}
